<template>
  <div id="cms">
    <el-container>
      <!-- 头布局 -->
      <el-header>
        <el-row :gutter="10">
          <el-col :span="23">普洱学院运动会管理系统</el-col>

          <el-col :span="1">
            <div class="right-menu">
              <el-dropdown
                class="avatar-container right-menu-item hover-effect"
                trigger="click"
              >
                <div class="avatar-wrapper">
                  <img :src="avatar" class="user-avatar" />
                  <i class="el-icon-caret-bottom" />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <!-- 主体 -->
        <el-main>
          <div class="paoma">
            <el-carousel :interval="3000" height="300px">
              <el-carousel-item v-for="item in itemList" :key="item.id">
                <img :src="item.idview" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-main>
        <!-- 侧边栏 -->
        <el-aside width="150px">
          <ul>
            <el-button
              class="button"
              @click="applyVisible = true"
              type="primary"
              >报名
            </el-button>
          </ul>
          <ul>
            <el-button
              class="button"
              @click="scoreVisible = true"
              type="primary"
              >成绩查询
            </el-button>
          </ul>
          <ul>
            <el-button class="button" type="primary">器材外借</el-button>
          </ul>
        </el-aside>
      </el-container>
    </el-container>
    <!-- 报名弹窗 -->
    <el-dialog
      title="报名"
      :visible.sync="applyVisible"
      :fullscreen="true"
      :before-close="handleClose"
    >
      <apply></apply>
    </el-dialog>
    <el-dialog
      title="成绩查询"
      :visible.sync="scoreVisible"
      :fullscreen="true"
      :before-close="handleClose"
    >
      <score></score>
    </el-dialog>
  </div>
</template>

<script>
import apply from "@/views/components/sports/apply";
import score from "@/views/components/sports/score";

export default {
  components: { apply, score },
  data() {
    return {
      applyVisible: false,
      scoreVisible: false,
      itemList: [
        { id: 0, idview: require("@/assets/sports-meet-img/sportImg1.jpg") },
        { id: 1, idview: require("@/assets/sports-meet-img/sportImg2.jpg") },
        { id: 2, idview: require("@/assets/sports-meet-img/sportImg3.jpg") },
        { id: 3, idview: require("@/assets/sports-meet-img/sportImg4.jpg") },
        { id: 4, idview: require("@/assets/sports-meet-img/sportImg5.png") },
        { id: 5, idview: require("@/assets/sports-meet-img/sportImg6.jpg") },
      ],
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    login() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style>
/* 布局样式 */
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #ffffff;
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-main {
  background-color: #ffffff;
  text-align: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 走马灯样式 */
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

img {
  width: auto;
  max-width: 100%;
}

.paoma {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 50%;
}

/* 按钮样式 */
.button {
  width: 100px;
  height: 60px;
}
</style>
